<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <link rel="stylesheet" href="../assets/css/layui.css">
    <link rel="stylesheet" href="../assets/css/view.css"/>
    <title></title>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=PFNPxsCebuDuD3Ipdkzum8KP8q46ZLak">
	</script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js"></script>
	<link rel="stylesheet" href="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.css" />
</head>
<body class="layui-view-body" style="background-image: url(../assets/images/login_back1.jpg); background-size: cover;">
    <div class="layui-content">
        <div class="layui-row">
            <div class="layui-card">
                <div class="layui-card-header" style="font-size: 18px;">规划任务
					<div class="layui-form-item" style="float: right;">
					    <div class="layui-input-block" style="line-height: 20px;">
							<label class="layui-form-label" style="font-size: 16px; vertical-align: middle;">高级模式：</label>
					        <input type="checkbox" name="switch" lay-skin="switch" lay-text="ON|OFF" lay-filter="switchTest" value="1" style="display: none;" >
							<div id="switch" class="layui-unselect layui-form-switch layui-form-onswitch" lay-skin="_switch" onclick="switch_method()"><em id="status">ON</em><i></i></div>
					    </div>
					</div>
				</div>
				<span style="color: #666666; margin-left: 25px;">
					规划任务填写说明：任务规划提供两种方式，通过页面右上角切换开关实现模式切换（1.智能规划：只需填写起点和终点的地理位置信息，智能生成任务路线。 2.高级规划：通过地图预览手动制作任务路线）<br>
				</span>
				<span style="color: #666666; margin-left: 25px;">
					智能规划填写规则：起点和终点的地理信息填写规则一致 （1.均只填写地理名，例：北京东直门，地点名越详细，位置更加精准。 2.均只填写经纬度值，例：(38.630784,103.086541)）
				</span>
                <form class="layui-form layui-card-body" action="" style="margin-top: 20px;">
                  <div class="layui-form-item">
                    <label class="layui-form-label">任务名称*:</label>
                    <div class="layui-input-block">
                      <input type="text" name="title" required  lay-verify="required" placeholder="请输入任务名称(必填)" autocomplete="off" class="layui-input" id="task_name">
                    </div>
                  </div>
				  <div class="layui-form-item" style="margin-top: 35px;display: none;" id="set_ori">
				      <label class="layui-form-label">设置起点(智能规划填写):</label>
				      <div class="layui-input-inline">
				        <input type="text" name="password" placeholder="请输入地理位置名称" autocomplete="off" class="layui-input" id="ori_position">
				      </div>
					  <div class="layui-input-inline">
					    <input type="text" name="password" placeholder="请输入经度点(非必填)" autocomplete="off" class="layui-input" id="ori_lng">
					  </div>
					  <div class="layui-input-inline">
					    <input type="text" name="password" placeholder="请输入纬度点(非必填)" autocomplete="off" class="layui-input" id="ori_lat">
					  </div>
				  </div>
				  <div class="layui-form-item" style="display: none;" id="set_de">
				      <label class="layui-form-label">设置终点(智能规划填写):</label>
				      <div class="layui-input-inline">
				        <input type="text" name="password" placeholder="请输入地理位置名称" autocomplete="off" class="layui-input" id="de_position">
				      </div>
					  <div class="layui-input-inline">
					    <input type="text" name="password" placeholder="请输入经度点(非必填)" autocomplete="off" class="layui-input" id="de_lng">
					  </div>
					  <div class="layui-input-inline">
					    <input type="text" name="password" placeholder="请输入纬度点(非必填)" autocomplete="off" class="layui-input" id="de_lat">
					  </div>
				  </div>
				  <div class="layui-form-item" id="pre_time">
				    <label class="layui-form-label">预期完成时长(分钟):</label>
				    <div class="layui-input-block">
				      <input type="text" name="title" placeholder="请输入时长" autocomplete="off" class="layui-input" id="PRE_time">
				    </div>
				  </div>
                  <div class="layui-form-item layui-form-text" style="margin-top: 35px;">
                    <label class="layui-form-label">任务简介*:</label>
                    <div class="layui-input-block">
                      <textarea name="desc" placeholder="请输入内容(必填)" class="layui-textarea" id="task_brief"></textarea>
                    </div>
                  </div>
                  <div class="layui-form-item">
                    <div class="layui-input-block">
                      <button class="layui-btn layui-btn-blue" lay-submit lay-filter="formDemo" onclick="create_task()">立即提交</button>
                      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                  </div>
                </form>
				<div id="tools_box" style="padding-bottom: 2%;">
					<span class="layui-form-label" style="font-size: 18px; width: 100%; text-align: left;">
						高级规划:<br>
					<div id="" style="margin-left: 2%; margin-top: 10px;">
						<span style="color: #666666;">
							操作说明：<br>
							1.通过地图预览窗口右上角的操作控件手动点击绘制更加精细的任务路线。<br>
							2.通过地图预览窗口的地图操作控件，改变地图比例尺，地图类型等显示属性。<br>
							3.下面表格将动态显示制作规划线路的点位顺序以及详细信息。
						</span>
					</div>
					</span>
					
					<div class="layui-content" style="margin-right: 1%; margin-left: 1.5%;">
						<table class="layui-table" lay-skin="line">
						  <colgroup>
						    <col width="150">
						    <col width="200">
						    <col>
						  </colgroup>
						  <thead>
						    <tr>
						      <th>点位号</th>
						      <th>位置名称</th>
							  <th>纬度点</th>  
							  <th>经度点</th>
							  <th>备注</th>
							  <th>其他</th>
						    </tr> 
						  </thead>
						  <tbody id="task_record_table">
						  </tbody>
						</table>
					</div>
					<div id="">
						<table border="0" cellspacing="" cellpadding="" style="float: right; margin-right: 2.3%;">
							<tr>
								<td><button style="width: 150px; height: 35px;" type="button" class="layui-btn layui-btn-radius layui-btn-danger" onclick="removeOverlay()">清除地图规划绘制</button></td>
								<td><input type="text" autocomplete="on" placeholder="请输入目标地名" class="layui-input" style="width: 150px; margin-left: 25px;" id="quick_position"></td>
								<td><button type="button" class="layui-btn layui-btn-normal" onclick="quick_posion()">快速跳转</button></td>
							</tr>
						</table>
					</div>
					<div id="map_container" style="height: 700px; width: 95%; margin-left: 2.5%;border:2px solid #002140;">
					</div>
				</div>
            </div>
        </div>
    </div>
    <script src="../assets/layui.all.js"></script>
	<script src="../mui.js"></script>
	<script type="text/javascript" charset="utf-8">
	      	mui.init();
	</script>
	<script type="text/javascript" src="../task.js"></script>
    <script>
      var form = layui.form
        ,layer = layui.layer;
	layui.use('form', function(){
	  var form = layui.form; 
	  form.render();
	});
    </script>
	<script type="text/javascript"> 
	var map = new BMap.Map("map_container");
	// 创建地图实例  
	var point = new BMap.Point(116.404, 39.915);
	// 创建点坐标  
	map.centerAndZoom(point, 18);
	// 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
	map.disableBizAuthLogo(); //关闭
	
	// var marker = new BMap.Marker(point);        // 创建标注    
	// map.addOverlay(marker);                     // 将标注添加到地图中 
	
	map.addControl(new BMap.NavigationControl());    
	map.addControl(new BMap.ScaleControl());    
	map.addControl(new BMap.OverviewMapControl());
	var opts = {offset: new BMap.Size(840, 5)};
	map.addControl(new BMap.MapTypeControl(opts));
		
	var styleOptions = {
	    strokeColor:"red",    //边线颜色。
	    fillColor:"red",      //填充颜色。当参数为空时，圆形将没有填充效果。
	    strokeWeight: 8,       //边线的宽度，以像素为单位。
	    strokeOpacity: 0.8,    //边线透明度，取值范围0 - 1。
	    fillOpacity: 0.6,      //填充的透明度，取值范围0 - 1。
	    strokeStyle: 'solid' //边线的样式，solid或dashed。
	}
	
	//实例化鼠标绘制工具
	var drawingManager = new BMapLib.DrawingManager(map, {
	    isOpen: false, //是否开启绘制模式
	    enableDrawingTool: true, //是否显示工具栏
	    drawingToolOptions: {
	        anchor: BMAP_ANCHOR_TOP_RIGHT, //位置
	        offset: new BMap.Size(5, 5), //偏离值
	    },
	    circleOptions: styleOptions, //圆的样式
	    polylineOptions: styleOptions, //线的样式
	    polygonOptions: styleOptions, //多边形的样式
	    rectangleOptions: styleOptions //矩形的样式
	});
	//获取绘制动作
	drawingManager.addEventListener("overlaycomplete", function(e) {
	    alert(e.point.lat);
	});
	
	// 获取点击制作任务的数据
	var point = {};
	var point_list=new Array();
	i = 0;
	// 捕捉鼠标点击动作
	map.addEventListener("click", function(e){        
	    var pt = e.point;
		//单点标注
		var marker = new BMap.Marker(pt);
		var geoc = new BMap.Geocoder();
		//获取位置POI		
		geoc.getLocation(pt, function(rs){
			var addComp = rs.addressComponents;
		map.addOverlay(marker);
		//添加数据到列表
		point.lat = pt.lat;
		point.lng = pt.lng;
		point_list[i] = point;
		// 添加到记录表
		task_record_table.innerHTML += '<tr> <td>'+ i +'</td>'
		+'<td>'+ addComp.street +'</td>'
		+'<td>'+ pt.lat +'</td>'
		+'<td>'+ pt.lng +'</td>'
		+'<td>'+ addComp.province + '-' + addComp.city + '</td>'
		+'<td>' + addComp.streetNumber + '</td></tr>';
		i++;
		});
	});
	// 清除覆盖物
	    function removeOverlay() {
	        map.clearOverlays();
			i = 0;
			point_list = [];
			task_record_table.innerHTML = ''
	    }
	// 地图快速定位
		function quick_posion(){
			target = document.getElementById("quick_position").value
			var myGeo = new BMap.Geocoder();      
			// 将地址解析结果显示在地图上，并调整地图视野    
			myGeo.getPoint(target, function(point){      
			    if (point) {      
			        map.centerAndZoom(point, 15);      
			        map.addOverlay(new BMap.Marker(point));      
			    }      
			 });
		}
	// 高级模式开关
		function switch_method(){
			if(document.getElementById("status").innerHTML == "ON"){
				alert("关闭任务规划高级模式？");
				document.getElementById("switch").setAttribute("class", "layui-unselect layui-form-switch");
				document.getElementById("status").innerHTML = "OFF";
				// 隐藏对应编辑标签
				document.getElementById("tools_box").style.display = "none";
				document.getElementById("map_container").style.display = "none";
				document.getElementById("pre_time").style.display = "none";
				document.getElementById("set_ori").style.display = "";
				document.getElementById("set_de").style.display = "";
			}
			else{
				alert("开启任务规划高级模式？");
				document.getElementById("switch").setAttribute("class", "layui-unselect layui-form-switch layui-form-onswitch")
				document.getElementById("status").innerHTML = "ON"
				// 显示对应的编辑标签
				document.getElementById("tools_box").style.display = "";
				document.getElementById("map_container").style.display = "";
				document.getElementById("pre_time").style.display = "";
				document.getElementById("set_ori").style.display = "none";
				document.getElementById("set_de").style.display = "none";
			}
		}
	</script>  
</body>
</html>